<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
  <!-- 这里可以添加CSS样式文件 -->
</head>

<body>
  <script type="importmap">
      {
        "imports": {
          "three": "https://threelab.cn/threejs/build/three.module.js",
          "three/addons/": "https://threelab.cn/threejs/examples/jsm/"
        }
      }
    </script>
  <script type="module">
    import * as THREE from 'three'
    import { OrbitControls } from "three/addons/controls/OrbitControls.js";

    init(document.body)

    function init(DOM) {

      const scene = new THREE.Scene()

      const camera = new THREE.PerspectiveCamera(50, DOM.clientWidth / DOM.clientHeight, 0.1, 100000)
      camera.position.set(0, 0, 1000)
      scene.add(camera);

      const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })
      renderer.setSize(DOM.clientWidth, DOM.clientHeight)
      renderer.setPixelRatio(window.devicePixelRatio * 2)
      renderer.setClearColor(0x000000)
      DOM.appendChild(renderer.domElement)

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = 0.1;

      const axes = new THREE.AxesHelper(55000)
      scene.add(axes)

      // 着色器天空
      const shaderSky = () => {
        // 顶点着色
        const vertexShader = `
  varying vec3 vWorldPosition;
  void main() {
    vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
    vWorldPosition = worldPosition.xyz;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }`;
        // 片元
        const fragmentShader = `
  uniform vec3 topColor;
  uniform vec3 bottomColor;
  uniform float offset;
  uniform float exponent;
  varying vec3 vWorldPosition;
  void main() {
      float h = normalize( vWorldPosition + offset ).y;
      gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 );
  }`
        const uniforms = {
          topColor: { value: new THREE.Color(0x0077ff) },
          bottomColor: { value: new THREE.Color('aliceblue') },
          offset: { value: 400 },
          exponent: { value: 0.6 },
        };
        const skyGeo = new THREE.SphereGeometry(4000, 32, 15);
        const skyMat = new THREE.ShaderMaterial({
          uniforms: uniforms,
          vertexShader: vertexShader,
          fragmentShader: fragmentShader,
          side: THREE.DoubleSide,
        });
        return new THREE.Mesh(skyGeo, skyMat)
      }
      scene.add(shaderSky())

      render()
      function render() {
        renderer.render(scene, camera)
        requestAnimationFrame(render)
      }
    }
  </script>
</body>

</html>